<!--
 * @Author: fishroom
 * @Date: 2021-08-25 21:21:35
 * @LastEditTime: 2021-09-04 12:37:45
 * @FilePath: \backstage\src\views\detailPage\DetailPage.vue
-->
<template>
  <div class="paticular ">
    <!-- 主图 -->
    <div class="g-width wrap about-box">
      <div class="cograph">
        <img :src="DetaiList.managerHeadImg" alt />
      </div>
      <!-- 地图显示 -->
      <el-descriptions title="座落信息" :column="3" border>
        <el-descriptions-item
          label="名称"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ DetaiList.zlName }}</el-descriptions-item
        >
        <el-descriptions-item label="编号">{{
          DetaiList.id
        }}</el-descriptions-item>
        <el-descriptions-item label="环境">{{
          DetaiList.environmentName
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small">{{ DetaiList.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="地址"
          :contentStyle="{ 'text-align': 'right' }"
          >{{ DetaiList.cityName }}</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions title="状态信息" :column="3" border>
        <el-descriptions-item
          label="水/月耗"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ DetaiList.latitude }}</el-descriptions-item
        >
        <el-descriptions-item label="电/月耗">{{
          DetaiList.longitude
        }}</el-descriptions-item>
        <el-descriptions-item label="看管人">{{
          DetaiList.managerName
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">损耗</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="介绍"
          :contentStyle="{ 'text-align': 'right' }"
          >{{ DetaiList.intro }}</el-descriptions-item
        >
      </el-descriptions>
      <!-- 座落分光 -->
      <h1 class="text-center">座落风光</h1>
      <CardSlide :itemList="arr" />
      <!-- 视频影像 -->
      <h1 class="text-center">视频影像</h1>
      <VedioSlide :itemList="list" />
      <div class="movieShow"></div>
      <!-- 历史沿革 -->
      <div class="timer_shaft">
        <Time-view />
      </div>
      <!-- 负责人 -->
      <div class="editor">
        <el-card shadow="hover">
          <div class="card-box">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
            <p>负责人: {{ DetaiList.managerName }}</p>
            <p>联系电话: {{ DetaiList.managerTel }}</p>
          </div>
        </el-card>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import TimeView from "../home/TimeView.vue";
import VedioSlide from "components/common/swiper/VedioSlide.vue";
import CardSlide from "components/common/swiper/CardSlide.vue";
export default {
  components: { TimeView, VedioSlide, CardSlide, VedioSlide },
  data() {
    TimeView;
    return {
      arr: [
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
      ],
      list: ["1", "2", "3", "4", "5"],
      size: 60,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    };
  },
  methods: {
    ...mapActions(["getDetailItem"])
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
    DetaiList() {
      return this.$store.state.DetailItemList;
    }
  },
  mounted() {
    this.getDetailItem(this.id);
  }
};
</script>

<style lang="scss">
@import url("../../style/about.scss");
.paticular {
  display: flex;
  flex-direction: column;
  gap: 20px;
  // 主图
  .cograph {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 地图显示
  .position {
    .atlas {
      img {
        width: 100%;
      }
    }
    p {
      font-size: 16px;
    }
  }
  // 楼栋信息
  .building {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .single {
      display: flex;
      .basic {
        display: flex;
        img {
          height: 100%;
        }
        .info {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }
      }
      .specific {
        width: 100%;
      }
    }
  }
  // 设备信息
  .facility {
    .layout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      border: 1px solid #000;
      padding: 0.8rem 0;
      div {
        width: 20%;
      }
    }
  }

  h1 {
    font-size: 25px;
  }
  // 座落风光
  .sildshow {
    width: 100%;
    .view {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .exhibition {
      ul {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.about-box {
  background-color: #fff;
}
.current {
  color: orange;
}

.el-card__body {
  display: flex;
  justify-content: center;
}
.card-box {
  width: 300px;
  text-align: center;
  color: #c0c4cc;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
